<template>
  <div id="menu">
    <nav>
      <router-link to="/main/index"><i class="fa fa-home" aria-hidden="true"></i><span class="menu-name">系统首页</span>
      </router-link>
      <router-link to="/main/reg"><i class="fa fa-edit" aria-hidden="true"></i><span class="menu-name">资产登记</span>
      </router-link>
      <router-link to="/main/inventory">
        <i class="fa fa-folder-o" aria-hidden="true"></i>
        <span class="menu-name">资产清点</span>
      </router-link>
      <router-link to="/main/search"><i class="fa fa-search" aria-hidden="true"></i><span class="menu-name">综合查询</span>
      </router-link>
      <router-link to="/main/analysis"><i class="fa fa-line-chart" aria-hidden="true"></i><span class="menu-name">统计分析</span>
      </router-link>
      <router-link to="/main/manager"><i class="fa fa-cogs" aria-hidden="true"></i><span class="menu-name">系统管理</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
  export default {
    name: "Menu",
    data() {
      return {
      }
    }
  }
</script>

<style scoped>
  nav {
    height: 96px;
    background: #485b79 url(/static/images/bghover.png);
    border-bottom: 5px solid #fb9337;;
  }

  nav a {
    float: left;
    display: block;
    height: 96px;
    width: 96px;
    /*border: 1px solid red;*/
    text-decoration: none;
    color: #fff;

    border-left: 1px solid #576a85;
    border-right: 1px solid #394962;
  }

  nav a span {
    display: block;
    text-align: center;
    font-size: 12px;
  }

  nav a .fa {
    width: 68px;
    height: 49px;
    /*border: 1px solid yellow;*/
    font-size: 42px;
    padding: 10px 0 0px 30px;
  }

  nav a:hover {
    background: url(/static/images/topheaderbg.png);
  }

  .active {
    background: url(/static/images/topheaderbg.png);
  }
</style>
